{"componentChunkName":"component---src-templates-blog-post-js","path":"/smooth-scrolling-css/","result":{"data":{"site":{"siteMetadata":{"title":"Rachl.dev"}},"markdownRemark":{"id":"44de87b8-31da-5e33-935b-facd0df2aa0b","excerpt":"Depuis de nombreuses années, nous nous sommes habitués aux boutons de retour vers le haut et aux liens internes qui adoptent le fameux comportement smooth…","html":"<p>Depuis de nombreuses années, nous nous sommes habitués aux boutons de retour vers le haut et aux liens internes qui adoptent le fameux comportement <span lang=\"en\">smooth scroll</span> ou “défilement doux”.</p>\n<p>S’il était autrefois nécessaire d’utiliser du javascript pour créer cette transition, il est désormais possible d’obtenir le même effet avec <strong>une seule ligne de CSS</strong>.</p>\n<h2>Scroll behavior</h2>\n<p>La propriété CSS <code class=\"language-text\">scroll-behavior</code> prend deux valeurs spécifiques :</p>\n<ul>\n<li><code class=\"language-text\">auto</code> : la valeur par défaut, sans transition.</li>\n<li><code class=\"language-text\">smooth</code> : le fameux comportement de défilement doux.</li>\n</ul>\n<p>Concrètement, pour appliquer le <span lang=\"en\">smooth scrolling</span> à l’entièreté de votre site il vous suffit de l’appliquer sur la balise <code class=\"language-text\">html</code> :</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token comment\">/* Smooth scrolling sur l'entièreté du site */</span>\n<span class=\"token selector\">html</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">scroll-behavior</span><span class=\"token punctuation\">:</span> smooth<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>Mais vous pouvez également choisir de l’appliquer à une section particulière :</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token comment\">/* Smooth scrolling dans l'élément some-section */</span>\n<span class=\"token selector\">.some-section</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">scroll-behavior</span><span class=\"token punctuation\">:</span> smooth<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2>Accessibilité</h2>\n<p>Un des grands avantages de cette solution est la possibilité de s’adapter simplement aux préférences des utilisateurs, en particulier ceux qui ont paramétré leur navigateur avec une réduction d’animation et de mouvements.</p>\n<p>Pour ce faire, il suffit d’ajouter une media query à notre premier code :</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token comment\">/* Smooth scrolling sur l'entièreté du site */</span>\n<span class=\"token selector\">html</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">scroll-behavior</span><span class=\"token punctuation\">:</span> smooth<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token atrule\"><span class=\"token rule\">@media</span> <span class=\"token punctuation\">(</span><span class=\"token property\">prefers-reduced-motion</span><span class=\"token punctuation\">:</span> reduce<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token selector\">html</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">scroll-behavior</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2>Support navigateur</h2>\n<p>à ce jour, le support navigateur pour cette propriété est d’aproximativement 70 %, elle est mise en place sur firefox, chrome et opera, mais pas sur safari, IE et edge (avant la version 76).</p>\n<p>Le support à jour :</p>\n<a href=\"http://caniuse.com/#feat=css-scroll-behavior\" class=\"link--image\">\n  <picture>\n    <source type=\"image/webp\" srcset=\"https://caniuse.bitsofco.de/image/css-scroll-behavior.webp\">\n    <img src=\"https://caniuse.bitsofco.de/image/css-scroll-behavior.png\" alt=\"Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com\">\n  </picture>\n</a>\n<p>Cela peut paraitre peu, mais compte tenu du peu de valeur ajoutée apportée par cette propriété, on peut tout à fait considérer que cette fonctionnalité entre dans le cadre de l’amélioration progressive. Si vous souhaitez toutefois une alternative avec un support plus large, vous pouvez vous tourner vers le script <a href=\"https://github.com/cferdinandi/smooth-scroll\">Smooth Scroll</a> de Chris Ferdinandi.</p>\n<p>Cette astuce a été découverte sur le blog <a href=\"https://gomakethings.com/smooth-scrolling-links-with-only-css/\">Go Make Things</a> du même auteur – Une mine d’or pour ceux qui cherchent à faire du développement lean et du Javascript pur.</p>","frontmatter":{"title":"Smooth scrolling uniquement en CSS","date":"07 janv. 2020","description":"Laissez tomber le javascript et optez pour une solution en une ligne de CSS pour un smooth scrolling sur vos ancres dans vos pages web.","tags":["css"],"serie":null}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/smooth-scrolling-css/","previous":{"fields":{"slug":"/synchroniser-automatiquement-navigateur/"},"frontmatter":{"title":"Comment synchroniser automatiquement votre navigateur avec Browsersync","tags":["workflow","ligne de commande"]}},"next":{"fields":{"slug":"/pourquoi-j-ai-choisi-gatsbyjs-pour-mon-blog/"},"frontmatter":{"title":"BlogDev #0 : Pourquoi j'ai choisi GatsbyJS pour mon blog","tags":["GatsbyJS"]}}}}}